<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>全球气象信息</title>
<link href="static/ol3/ol.css" type="text/css" rel="stylesheet">
<link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="static/app/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="static/app/css/qixiang.css" rel="stylesheet" type="text/css">
</head>
 
<body>
	<!-- 工具 -->
	<div class="btn_toolsbox pf" style="top: 20px; right: 20px;">
		<ul class="btn_tools clearfix">
			<li id="btntip1"><a href="javascript:;" data='{"type":"base","value":"msimg"}' title="影像图"><i class="fa fa-photo" title="影像图"></i></a></li>
			<li id="btntip2"><a href="javascript:;" data='{"type":"base","value":"msvec"}' title="矢量图"><i class="fa fa-map-o" title="矢量图"></i></a></li>
			<li id="btntip4"><a href="javascript:;" data='{"type":"view","value":"2d"}' title="二维"><i class="fa fa-window-maximize" title="二维"></i></a></li>
			<li id="btntip5"><a href="javascript:;" data='{"type":"view","value":"3d"}' title="三维"><i class="fa fa-globe" title="三维"></i></a></li>
			<li id="btntip6"><a href="javascript:;" data='{"type":"view","value":"23d"}' title="二三维"><i class="fa fa-cc" title="二三维"></i></a></li>
			<li id="btntip7"><a href="javascript:;" data='{"type":"action","value":"local"}' title="当前位置"><i class="fa fa-map-marker" title="当前位置"></i></a></li>
			<li id="btntip8"><a href="javascript:;" data='{"type":"action","value":"default"}' title="默认视图"><i class="fa fa-home" title="默认视图"></i></a></li>
			<li id="btntip9"><a href="javascript:;" data='{"type":"action","value":"fullscreen"}' title="全屏"><i class="fa fa-arrows" title="全屏"></i></a></li>
		</ul>
	</div>
	<!-- 工具end -->


	<!-- 大屏浮框列表-->
	<div class="dp_xuanfubox pf" style="bottom: 10px; right: 35px;">
		<h2>
			图层 <i class="fa fa-minus-square-o" aria-hidden="true"></i>
		</h2>
		 <ul> 
			<li class="hastu"><p>
					<i class="fa fa-mixcloud" aria-hidden="true"></i>  风 <i id="btnwind" class="fa fa-play  fr mt10" aria-hidden="true"  style="float:right"></i>
				</p>
			</li>			 
		 	<li class="hastu">
				<p>
					<i class="fa fa-thermometer-quarter" aria-hidden="true"></i>  AQI <i class="fa fa-angle-down fr mt10"
						aria-hidden="true"></i>
				</p>
				<ol>
					<li><p data='{"type":"env","name":"cosc"}'>中国AQI数值</p></li>
					<li><p data='{"type":"env","name":"cosc"}'>中国AQI等值线</p></li>
					<li><p data='{"type":"env","name":"cosc"}'>中国AQI渲染图</p></li>				
					<li><p data='{"type":"env","name":"cosc"}'>全球AQI数值</p></li>
					<li><p data='{"type":"env","name":"cosc"}'>全球AQI等值线</p></li>
					<li><p data='{"type":"env","name":"cosc"}'>全球AQI渲染图</p></li>									
				</ol>
			</li>
			<li class="hastu">
				<p>
					<i class="fa fa-thermometer-quarter" aria-hidden="true"></i>  环境 <i class="fa fa-angle-down fr mt10"
						aria-hidden="true"></i>
				</p>
				<ol>
					<li><p data='{"type":"env","name":"cosc"}'>地表CO浓度</p></li>
					<li><p data='{"type":"env","name":"co2sc"}'>地表CO2浓度</p></li>
					<li><p data='{"type":"env","name":"so2sm"}'>地表SO2总质量</p></li>
					<li><p data='{"type":"env","name":"duex"}'>尘埃消光(550纳米)</p></li>
					<li><p data='{"type":"env","name":"so4ex"}'>硫酸盐消光(550纳米)</p></li>
				</ol>
			</li>
			<li class="hastu">
				<p>
					<i class="fa fa-thermometer-quarter" aria-hidden="true"></i>  大气<i class="fa fa-angle-down fr mt10"
						aria-hidden="true"></i>
				</p>
				<ol>
					<li><p data='{"type":"env","name":"cosc"}'>风力风向</p></li>
					<li><p data='{"type":"env","name":"cosc"}'>地表温度</p></li>
					<li><p data='{"type":"env","name":"cosc"}'>体感温度</p></li>
					<li><p data='{"type":"env","name":"cosc"}'>水汽含量</p></li>
					<li><p data='{"type":"env","name":"cosc"}'>云中总水量</p></li>
					<li><p data='{"type":"env","name":"cosc"}'>3小时累积降雨量</p></li>
					<li><p data='{"type":"env","name":"cosc"}'>对流可用位能</p></li>
					<li><p data='{"type":"env","name":"cosc"}'>平均海平面压力</p></li>
					<li><p data='{"type":"env","name":"cosc"}'>瞬时风电功率密度</p></li>
				</ol>
			</li>
			<li class="hastu">
				<p>
					<i class="fa fa-thermometer-quarter" aria-hidden="true"></i>  海洋<i class="fa fa-angle-down fr mt10"
						aria-hidden="true"></i>
				</p>
				<ol>
					<li><p data='{"type":"env","name":"cosc"}'>波浪高度</p></li>
					<li><p data='{"type":"env","name":"cosc"}'>海面温度</p></li>
					<li><p data='{"type":"env","name":"cosc"}'>海面温度差异</p></li>
				</ol>
			</li>
<!-- 			<li class="hastu"><p> -->
<!-- 					<i class="fa fa-mixcloud" aria-hidden="true"></i> 云 -->
<!-- 				</p></li> -->
<!-- 			<li class="hastu"><p> -->
<!-- 					<i class="fa fa-snowflake-o" aria-hidden="true"></i> 雨、雪 -->
<!-- 				</p></li> -->
<!-- 			<li class="hastu"><p> -->
<!-- 					<i class="fa fa-tachometer" aria-hidden="true"></i> 气压 <i class="fa fa-angle-down fr mt10" aria-hidden="true"></i> -->
<!-- 				</p> -->
<!-- 				<ol> -->
<!-- 					<li><p>1000百帕</p></li> -->
<!-- 					<li><p>2000百帕</p></li> -->
<!-- 				</ol></li> -->
		</ul>
	</div>

	<!-- 图例 -->
	<div class="tulibox pf" style="bottom: 10px; right: 0;"></div>
	<!-- 图例end -->

	<!-- 播放器 -->
	<div id="introNav">
		<div class="contral"><i class="fa fa-play-circle"></i></div>
		<div id="timeline">
			<div class="inside"></div>
			<div id="timeactive" class="active"></div>
		</div>
		<ul id="timelabel" class="nav">
			<li class="active"><a href="javascript:void(0);">宋桂祥...<span class="point"></span></a></li>			 			
		</ul>
	</div>
	
	<!-- 大屏地图区 -->
	<div class="daping_mapbox">
		<!-- 内容模块结构，可以忽略并删除-->
		<div id="tooltip" class="ol-popup"></div>
		<div id="popup2d" class="ol-popup">
			<div class="amap-overlays">
				<div class="amap-info" style="position: absolute; left: -208px; top: 5px;">
					<div style="position: absolute; bottom: 24px; left: 39px;">
						<div>
							<div class="station-infowindow">
								<div class="info-header">
									<span class="station-name" id="popup2dtitle">宋桂祥...</span><span class="up-datetime">
										<!-- 更新于2016-9-2 15:00 -->
									</span> <span id="popcloser2d" class="info-btn-close"></span>
								</div>
								<div id="popup-content2d" class="info-body"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="popup3d" class="ol-popup" style="position: absolute; z-index: 99; height: 10px; width: 20px;">
			<div class="amap-overlays">
				<div class="amap-info" style="position: absolute; left: 208px; top: 5px;">
					<div style="position: absolute; bottom: 24px; left: 39px;">
						<div>
							<div class="station-infowindow">
								<div class="info-header">
									<span class="station-name" id="popup3dtitle">宋桂祥...</span><span class="up-datetime">
										<!-- 更新于2016-9-2 15:00 -->
									</span> <span id="popcloser3d" class="info-btn-close"></span>
								</div>
								<div id="popup-content3d" class="info-body"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="map3d" style="position: absolute; top: 0px; left: 0px; width: 100%; visibility: hidden;height: 100%; background: transparent;"></div>
		<div id="map2d"  style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;  background: transparent;"></div>
		<canvas id="windmap" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;"></canvas>
		<div id="myoverlayer" style="display: none"></div>
	</div>
	<!-- 大屏地图区end -->

 
	<script type="text/javascript" src="static/jquery/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" src="static/underscore/underscore-min.js"></script>
	<script type="text/javascript" src="static/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="static/mustache/mustache.min.js"></script> 
	<script type="text/javascript" src="static/moment/moment.min.js"></script> 
	<script type="text/javascript" src="static/player/playbar.js"></script> 
	<script type="text/javascript" src="static/cesium/Cesium.js"></script>
	<script type="text/javascript" src="static/app/js/app.js"></script> 	
	 
</body>
</html>

